<template>
    <div class="recommend">
        <div>
            <div class="recommend_top">
                <p>人气推荐></p>
            </div>
            <div class="recommend_div">
                <ul class="recommend_ul">
                    <li v-for="(item, index) in list" :key="index" v-show="index >= 1 && index <= 5">
                        <img :src="item.pic" alt="">
                        <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:200px;">{{item.name}}</p>
                        <p class="recommend_p" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:150px;">{{item.characteristic}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { kanjia } from "../../../utils/api";

export default {
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        kanjia().then((res) => {
            console.log(res);
            this.list = Object.values(res.goodsMap);
        });
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.recommend_top {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #e9e9e9;
}
.recommend_ul{
    width: 100%;
    height: 12rem;
    // background: palevioletred;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    li{
        width: 45%;
        height: 5rem;
        font-size: 0.3rem;
        img{
            width: 95%;
            height: 4.5rem;
        }
        p{
            margin-top: 0.2rem;
        }
    }
}
</style>
